<!-- 导航栏 1360px-->
<template>
	<view class="nav-container">
		<view class="nav-bar">
			<!-- 状态栏占位 -->
			<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
			<!-- 主体 -->
			<view class="logo" @click="goToHome">
				<image :src="logoSrc" mode="widthFix" alt="logo"></image>
			</view>
			<view class="middle-links">
				<view class="middle-content">
					<view v-show="menu.is_show"
						:class="['link',menu.title==='产品中心'?'isproduct':'',clickColorIndex===menuIndex?'clickcolor':'']"
						@click="goToProductCenter(menuIndex,menu)" v-for="(menu,menuIndex) in links" :key="menuIndex">
						{{menu.title}}
						<uni-icons v-show="menu.title==='产品中心'" class="uni_icons" type="down" size="12"></uni-icons>
						<view v-show="menu.title==='产品中心'" class="menu">
							<view class="menuList">
								<view class="menu-item" v-for="(exit,index) in listData" :key="index"
									@click.stop="navigate('/pages/product-center/product-center?_id=' + exit._id)">
									<view class="item-text">
										<text>{{exit.title}}</text>
										<text>{{exit.en_title}}</text>
									</view>
									<view class="item-img">
										<image class="image" :src="exit.image[0].url" mode="widthFix"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="middle-r">
					<view class="iconfont icon-sousuo amplify" title="搜索" @click="amplify()" id="isclose">
						<view class="amplify_box" @click.stop v-show="isamplify">
							<view class="belongTo1"></view>
							<!-- <uni-icons type="up" size="30" class="belongTo"></uni-icons> -->
							<view class="amplify_view">
								<input v-model="searchKeyword" class="uni-input amplify_input" focus
									placeholderStyle="font-size:14px" placeholder="请输入商品名称/型号" />
								<text class="iconfont icon-sousuo amplify_icon" @click="onSearch()"></text>
							</view>
						</view>
					</view>
					<view class="iconfont icon-gouwuche shopping" title="购物车"
						@click="navigate('/pages/shopping/shopping')"></view>
				</view>
			</view>
			<view class="right-section">
				<view class="lang-switch" @click="toggleLanguage">
					<text :class="['bold_text',currentLanguage === 'zh' ? 'boldCla' : '']">中文</text>
					<text class="testCla">|</text>
					<text :class="['bold_text',currentLanguage === 'zh' ? '' : 'boldCla']">En</text>
				</view>
				<view class="avatar">
					<image :src="userinfo.avatar||'/static/userProfile.png'" @click="navigateToUserinfo()"
						mode="widthFix"></image>
					<view class="personalCenter" v-show="userinfo._id">
						<view class="belongTo2"></view>
						<view class="personalView" @click="myOrder">我的订单</view>
						<!-- <view class="personalView" @click="goToProfile(0)">个人中心</view> -->
						<view class="personalView" @click="goToProfile(1)">我的消息</view>
						<view class="personalView" @click="goToProfile(2)">账号设置</view>
						<view class="personalView" @click="loginOut()">退出登录</view>
					</view>
				</view>
			</view>
			<!-- <view @click="goTotext1">111</view> -->
		</view>
	</view>
</template>

<script>
	import {
		navigatorMenu,
		getCategory
	} from '../../utils/http_data.js';
	export default {
		name: 'home',
		data() {
			return {
				userinfo: {}, // 用户信息
				searchKeyword: '', // 搜索内容
				statusBarHeight: 0, // 状态栏高度
				logoSrc: '/static/logo.png', // 请替换为实际的logo图片路径
				cationSrc: '/static/images/classification01.png', // 请替换为实际的logo图片路径
				avatarSrc: '/static/userProfile.png', // 请替换为实际的头像图片路径
				currentLanguage: 'zh',
				links: [],
				listData: [],
				isamplify: false, // 是否显示头部下拉搜索框
			};
		},
		props: {
			clickColorIndex: {
				type: Number, // 数字类型
				required: true, // 必填项
				default: 0 // 默认值
			},
		},
		mounted() {
			this.getStatusBarHeight();
			document.addEventListener('click', this.handleClickOutside);
			this.navigatorMenuFun()
			this.getCategoryfun()


			this.getStorageUserinfo();
		},
		methods: {
			//判断是否登录，如果未登录先登录
			navigateToUserinfo() {
				var userinfo = this.userinfo;
				if (userinfo && userinfo._id) {
					//跳转到个人中心
					uni.navigateTo({
						url: '/pages/dersonalCenter/dersonalCenter'
					})
				} else {
					//跳转到登录页面
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			//获取登录用户信息
			getStorageUserinfo() {
				var that = this;
				uni.getStorage({
					key: 'login-userinfo',
					success: function(res) {
						if (res && res.data && res.data._id) {
							that.userinfo = res.data;
						}

					}
				})
			},
			//退出登录
			loginOut() {
				uni.removeStorage({
					key: 'login-userinfo',
					success: function() {
						//刷新当前页面
						// 获取当前页面路径
						const currentPage = getCurrentPages().pop();
						const currentPath = currentPage.route; // 得到当前页面路径，如 "pages/index/index"

						// 重新加载当前页面
						uni.reLaunch({
							url: '/' + currentPath
						});
					}
				})
			},







			// 请求导航栏
			navigatorMenuFun() {
				navigatorMenu().then((data) => {
					this.links = data.data
					console.log('导航信息：', this.links)
				})
			},
			// 请求产品中心分类数据
			getCategoryfun() {
				getCategory().then((data) => {
					console.log('产品中心下拉悬浮：', data.data)
					this.listData = data.data;
				})
			},

			handleClickOutside(event) {
				// console.log(event.target.id)
				if (event.target.id && event.target.id === 'isclose') {

				} else {
					this.isamplify = false;
				}
			},
			navigate(url) {
				uni.navigateTo({
					url: url
				});
			},
			amplify(e) {
				if (!this.isamplify) {
					console.log(11111)
					this.isamplify = true;
				}
			},
			loseblur() {
				// this.isamplify = false;
			},
			// 跳转到首页
			goToHome() {
				uni.navigateTo({
					url: '/pages/index/index'
				});
			},
			// 向子组件传递点击的哪一个导航栏
			goToProductCenter(index, ele) {
				console.log('跳转：', ele)
				uni.redirectTo({
					url: ele.url
				});

			},
			// 切换语言
			toggleLanguage() {
				// this.currentLanguage = this.currentLanguage === 'zh' ? 'en' : 'zh';
				// 在这里可以添加语言切换的逻辑，比如切换页面文案等
				// console.log('切换：',this.currentLanguage)
				// if (this.currentLanguage == 'zh') {

				// 获取当前页面实例
				// const pages = getCurrentPages();
				// // 页面栈的最后一个元素就是当前页面
				// const currentPage = pages[pages.length - 1];

				// const currentPath = currentPage.route;
				// console.log("当前页面路径：", currentPath); // 例如：pages/index/index

				// // 当前页面的参数（url 中 ? 后面的部分）
				// const currentOptions = currentPage.options;
				// console.log("当前页面参数：", currentOptions); // 例如：{id: '123', name: 'test'}

				// // 完整的页面地址（路径 + 参数）
				// let currentUrl = currentPath + "?";
				// for (const key in currentOptions) {
				// 	currentUrl += `${key}=${currentOptions[key]}&`;
				// }
				// currentUrl = currentUrl.slice(0, -1); // 去除最后一个 &
				// console.log("当前完整页面地址：", currentUrl);

				// uni.navigateTo({
				// 	url: '/pages/index/index'
				// });
				// window.open('http://www.kungshu.com', '_blank');
				// uni.navigateTo({
				// 	url: '/en/pages/index/index'
				// });
				// } else {
				// window.open('http://www.kungshu.com/en', '_blank');
				location.replace('http://www.kungshu.com/en');
				// }
			},
			// 跳转到个人资料页面
			goToProfile(val) { // 0.个人中心 1、我的消息 2、账号设置
				const isLogin = uni.getStorageSync('login-userinfo')
				console.log('用户登录信息：', isLogin)
				if (isLogin._id) {
					uni.navigateTo({
						url: '/pages/dersonalCenter/dersonalCenter?type=' + val
					});
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}
			},
			// 跳转到我的订单页面
			myOrder() {
				uni.navigateTo({
					url: '/pages/order/order'
				});
			},
			// 跳转到测试页面
			// goTotext1() {
			// 	uni.navigateTo({
			// 		url: '/pages/test2/test2'
			// 	});
			// },
			// 获取状态栏高度
			getStatusBarHeight() {
				const systemInfo = uni.getSystemInfoSync();
				this.statusBarHeight = systemInfo.statusBarHeight;
			},
			onSearch() {
				console.log("点击搜索：", this.searchKeyword)
				uni.navigateTo({
					url: '/pages/product-center/product-center?searchKeyword=' + this.searchKeyword
				});
			}
		},
		beforeDestroy() {
			console.log(44444)
			document.removeEventListener('click', handleClickOutside);
		},
		// destroyed() {
		//   console.log(5555)
		//   document.removeEventListener('click', handleClickOutside);
		// }
	};
</script>

<style>
	/* .uni-searchbar__box {
	height: 100px !important;
} */
</style>

<style scoped>
	.nav-container {
		position: relative;
	}

	.nav-container::after {
		content: "";
		display: block;
		height: 90px;
		visibility: hidden;
	}

	.nav-bar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;

		display: flex;
		align-items: center;
		height: 90px;
		min-width: 1360px;
		z-index: 999;
		background-color: #FFF;
	}

	.logo {
		flex: 1;
	}

	.logo image {
		width: 220px;
		margin-left: 30px;
		cursor: pointer;
	}

	.middle-links {
		flex: 3;
		height: 100%;
		display: flex;
	}

	.middle-content {
		width: 780px;
		display: flex;
		height: 100%;
	}


	.link {
		height: 100%;
		line-height: 90px;
		flex: 1;
		font-size: 16px;
		font-weight: 600;
		color: #333;
		text-align: center;
	}

	.link:hover {
		color: #d9001b;
		cursor: pointer;
	}

	.middle-r {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		padding-right: 10px;
		box-sizing: border-box;
	}

	.middle-r .amplify {
		font-size: 20px;
		line-height: 90px;
		padding: 0 10px;
		box-sizing: border-box;
		position: relative;
		top: 0;
		left: 0;
		cursor: pointer;
	}

	.amplify_box {
		width: 290px;
		/* height: 108px; */
		line-height: 0;
		border: 1px solid #E5E5E5;
		padding: 10px;
		box-sizing: border-box;
		position: absolute;
		top: 74px;
		right: -210px;
		background-color: #FFF;
		border-radius: 6px;
	}

	.belongTo {
		position: absolute;
		top: -6px;
		left: 154px;
		color: #E5E5E5 !important;
	}

	.belongTo1 {
		position: absolute;
		top: -6px;
		left: 52px;
		border-top: 1px solid #E5E5E5;
		border-left: 1px solid #E5E5E5;
		height: 10px;
		width: 10px;
		background-color: #FFF;
		transform: rotate(45deg);
	}

	.amplify_view {
		position: relative;
		top: 0;
		left: 0;
	}

	.amplify_input {
		width: 180px;
		height: 40px;
		border: 1px solid #999;
		border-right: 0px solid #999;
		display: inline-block;
		padding: 0 40px 0 10px;
		border-radius: 6px 0 0 6px;
	}

	.amplify_icon {
		width: 40px;
		height: 42px;
		line-height: 40px;
		position: absolute;
		top: 0;
		right: 0;
		font-size: 22px;
		color: #FFF;
		text-align: center;
		border-radius: 0 6px 6px 0;
		background-color: rgba(217, 0, 27, 1);
	}

	.middle-r .shopping {
		font-size: 22px;
		line-height: 90px;
		padding: 0 10px;
		box-sizing: border-box;
		cursor: pointer;
	}

	/* 下拉开始 */
	.menu {
		width: 100%;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 1000;

		box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 3px;
		display: none;
		background: rgb(255, 255, 255);
		border-top: 1px solid rgb(238, 238, 238);
		text-align: left;
	}

	.menuList {
		width: 100%;
		height: 730px;
		display: flex;
		flex-wrap: wrap;
		/* justify-content: space-around; */
		gap: 20px;
		padding: 20px 0 40px 20px;
		box-sizing: border-box;
		overflow-y: auto;
	}

	.menu-item {
		width: calc(25% - 20px);
		height: 150px;
		background-color: rgb(249, 249, 249);
		box-sizing: border-box;
		display: flex;
		padding: 20px;
		transition: transform 0.3s ease;
	}

	.menu-item:hover {
		transform: translateY(-10px);
	}

	.menu-item:hover text {
		color: #d9001b;
	}

	.item-text {
		flex: 1;
		/* background: #d9001b; */
		margin: auto;
	}

	.item-text text {
		font-size: 14px;
		line-height: 30px;
		display: block;
		/* margin: 20px 0 0 40px; */
		color: rgb(51, 51, 51);
		font-weight: 400;
		text-align: center;
	}

	.item-img {
		flex: 1;
		height: 120px;
		margin: auto;
		padding-left: 80px;
		padding-right: 12px;
		box-sizing: border-box;
		display: flex;
	}

	.item-img .image {
		width: 70%;
		height: 64px;
		max-width: 80%;
		width: 60%;
		margin: auto;
	}

	.isproduct:hover .menu {
		display: block;
		animation: pulse 0.4s forwards;
	}

	@keyframes pulse {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.uni_icons {
		margin-left: 2px;
	}

	.isproduct:hover .uni_icons {
		color: #d9001b !important;
	}

	.clickcolor {
		color: #d9001b !important;
	}

	/* 下拉结束 */

	.right-section {
		/* flex: 1;*/
		width: 164px;
		height: 100%;
		float: right;
		display: flex;
		margin-right: 30px;
		flex-direction: row;
		justify-content: center;
		/* justify-content: space-between; */
	}

	.lang-switch {
		height: 100%;
		font-size: 16px;
		color: #333;
		cursor: pointer;
		margin-right: 40px;
		line-height: 90px;
		position: relative;
		top: 0;
		left: 0;
	}

	.testCla {
		width: 1px;
		height: 4px;
		font-size: 14px;
		color: #999;
		position: absolute;
		top: 0;
		left: 35px;
	}

	.avatar {
		width: 40px;
		height: 100%;
		border-radius: 50%;
		/* overflow: hidden; */
		cursor: pointer;
		position: relative;
		display: flex;
	}

	.avatar image {
		width: 100%;
		height: 40px;
		border-radius: 50%;
		margin: auto;
	}

	.bold_text {
		color: #000;
		margin-right: 18px;
		font-size: 14px;
	}

	.boldCla {
		color: #d9001b;
		font-weight: 700;
	}

	.avatar:hover .personalCenter {
		display: block;
		animation: pulse 0.4s forwards;
	}

	.personalCenter {
		display: none;
		position: absolute;
		top: 78px;
		left: -42px;
		z-index: 99;
		width: 100px;
		min-height: 140px;
		background-color: #FFF;
		border-radius: 4px;
		box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
		;
	}

	.personalView {
		width: 100%;
		height: 35px;
		line-height: 35px;
		text-align: center;
		color: #333;
		font-size: 14px;
	}

	.personalView:hover {
		background-color: #E5E5E5;
	}

	.personalView:nth-child(2) {
		margin-top: 10px;
	}

	.belongTo2 {
		height: 10px;
		width: 10px;
		position: absolute;
		top: -6px;
		left: 56px;
		border-top: 1px solid #E5E5E5;
		border-left: 1px solid #E5E5E5;
		background-color: #FFF;
		transform: rotate(45deg);
		z-index: 999;
	}
</style>